<template>
  <div class="min-h-screen bg-gray-900 text-gray-100 p-8 font-sans">
    <!-- 头部 -->
    <header class="flex flex-col md:flex-row items-center gap-8 mb-12">
      <img
          src="https://ts1.tc.mm.bing.net/th/id/R-C.662b7e3232710f30198ac867bb8f1762?rik=%2f2SgVjpfdNpEmg&riu=http%3a%2f%2fimg.kuai8.com%2fnewspic%2fimage%2f202008%2f21%2fdc30287292.jpg&ehk=e5xcmxKN2V32R3QhRUy114zju7tgc1z02nwj5x06py8%3d&risl=&pid=ImgRaw&r=0"
          class="w-48 h-48 rounded-full border-4 border-red-600 shadow-lg hover:scale-105 transition-transform"
          alt="悟空"
      >
      <div class="text-center md:text-left">
        <h1 class="text-5xl font-bold mb-4 bg-gradient-to-r from-red-600 to-yellow-500 bg-clip-text text-transparent">
          齐天大圣
        </h1>
        <div class="flex items-center justify-center md:justify-start gap-4">
          <div class="flex items-center gap-2">
            <i class="i-mdi-sword w-6 h-6 text-red-500"></i>
            <span class="text-xl">斗战胜佛</span>
          </div>
          <div class="flex items-center gap-2">
            <i class="i-mdi-palm-tree w-6 h-6 text-yellow-500"></i>
            <span class="text-xl">花果山水帘洞</span>
          </div>
        </div>
      </div>
    </header>

    <!-- 主要内容 -->
    <main class="max-w-4xl mx-auto grid gap-12">
      <!-- 简介 -->
      <section>
        <h2 class="text-3xl font-bold mb-6 border-l-4 border-red-600 pl-4">天地造化</h2>
        <p class="text-gray-400 leading-relaxed">
          受天地灵气孕育而生之石猴，习得七十二变、筋斗云等神通，曾大闹天宫，被压五行山五百年后随唐僧西天取经，终成斗战胜佛。
        </p>
      </section>

      <!-- 神通技能 -->
      <section>
        <h2 class="text-3xl font-bold mb-6 border-l-4 border-red-600 pl-4">神通技能</h2>
        <div class="grid gap-4">
          <div v-for="skill in skills" :key="skill.name" class="bg-gray-800 p-4 rounded-lg">
            <div class="flex justify-between mb-2">
              <span class="text-red-400">{{ skill.name }}</span>
              <span class="text-yellow-500">{{ skill.level }}</span>
            </div>
            <div class="h-2 bg-gray-700 rounded-full">
              <div
                  :class="['h-full rounded-full transition-all duration-500', skill.color]"
                  :style="{ width: skill.progress }"
              ></div>
            </div>
          </div>
        </div>
      </section>

      <!-- 战斗经历 -->
      <section>
        <h2 class="text-3xl font-bold mb-6 border-l-4 border-red-600 pl-4">赫赫战功</h2>
        <div class="space-y-8 relative before:absolute before:left-7 before:h-full before:w-1 before:bg-red-600/50">
          <div
              v-for="exp in experience"
              :key="exp.year"
              class="relative pl-20"
          >
            <div class="absolute left-8 w-4 h-4 bg-red-600 rounded-full -translate-x-1/2"></div>
            <h3 class="text-xl font-bold mb-2">
              {{ exp.year }} <span class="text-red-400">{{ exp.event }}</span>
            </h3>
            <p class="text-gray-400">{{ exp.description }}</p>
          </div>
        </div>
      </section>
    </main>
  </div>
</template>

<script setup>
const skills = [
  { name: '七十二变', progress: '100%', color: 'bg-red-600', level: '出神入化' },
  { name: '筋斗云', progress: '100%', color: 'bg-yellow-500', level: '瞬息万里' },
  { name: '金箍棒法', progress: '100%', color: 'bg-orange-500', level: '横扫千军' },
  { name: '金刚不坏', progress: '100%', color: 'bg-amber-500', level: '刀枪不入' },
]

const experience = [
  {
    year: '上古时期',
    event: '灵石孕育',
    description: '受天地灵气孕育而生，目运金光射冲斗府'
  },
  {
    year: '大闹天宫',
    event: '齐天大圣',
    description: '打破蟠桃宴，偷食老君丹，力战十万天兵天将'
  },
  {
    year: '西行取经',
    event: '斗战胜佛',
    description: '保唐僧西天取经，历经九九八十一难终成正果'
  }
]
</script>

<style>
@import url('https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&display=swap');

.font-sans {
  font-family: ui-sans-serif, system-ui, -apple-system, 'Ma Shan Zheng', sans-serif;
}
</style>